<template>
  <div class="item">
    <div class="title">{{ item.title }}</div>
    <div class="author">{{ item.author }}-{{ item.category }}</div>
    <router-link :to="`/meizi/${item._id}`">
      <img :src="item.url" alt="" />
      <div class="desc">{{ item.desc }}</div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "GirlItem",
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  }
};
</script>

<style scoped lang="less">
.item {
  border: 2px dotted cadetblue;
  padding: 20px;

  .title {
    font-size: 24px;
    font-weight: bold;
  }

  img {
    width: 300px;
  }

  .desc {
    background-color: #42b983;
    padding: 10px;
    color: #fff;
    font-size: 20px;
  }
}
</style>